<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高度塌陷</title>
    <style>
        .box1 {
            background-color: pink;
            border: 2px solid red;
        }

        .box2 {
            background-color: skyblue;
            height: 100px;
            width: 100%;
            /*
             当 子元素开启 浮动后，脱离文档流，父元素没有设置高度时，缺少子元素的支撑，会造成“高度坍塌”情况
            */
            float: left;
        }
        .box3{
            border: 2px solid blue;
            /*父元素 设置overflow 为非 visiable 时，可解决。
              当设置该属性时，可开启浏览器隐藏的 BFC （Block Formatting Content）属性，IE6 没有该隐藏属性
            */
            overflow: hidden;
            /*
             以上，为了解决IE6 没有BFC 隐藏属性问题，开启 IE6 隐藏的 hasLayout 属性，开启方式之一
            zoom:1  样式效果 ，放大对应的倍数
            */
            zoom: 1;
        }
        .box4{
            background-color: orange;
            height: 100px;
            width: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 高度坍塌情况 -->
    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
    <!-- 解决高度坍塌方案一 -->
    <div class="box3">
        <div class="box4"></div>
    </div>
</body>

</html>